<template>
  <div>
    <login-top middleText="注册bilibili"></login-top>
    <!-- '^.{6,16}$' 6到16位任意字符 -->
    <login-text
      label="姓名"
      class="login-text"
      placeholder="请输入姓名！"
      @inputChange="res => (name = res)"
      rule="^.{6,16}$"
    ></login-text>
    <login-text
      label="账号"
      class="login-text"
      placeholder="请输入账号！"
      @inputChange="res => (username = res)"
      rule="^.{6,16}$"
    ></login-text>
    <login-text
      label="密码"
      class="login-text"
      placeholder="请输入密码！"
      @inputChange="res => (password = res)"
      type="password"
    ></login-text>
    <login-btn btnText="注册" @sendInfo="sendInfo"></login-btn>
    <login-btn btnText="返回登录" @sendInfo="$router.push('/login')" class='btn2'></login-btn>

  </div>
</template>

<script>
import LoginTop from "@/view/LoginTop.vue";
import LoginText from "@/view/LoginText.vue";
import LoginBtn from "@/view/LoginBtn.vue";
export default {
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  data() {
    return {
      name: "",
      username: "",
      password: ""
    };
  },
  methods: {
    async sendInfo() {
      if (this.name && this.username && this.password) {
        const res = await this.$http.post(`/register`, {
          name: this.name,
          username: this.username,
          password: this.password
        });
        console.log(res);
        if (res.data.code !==200) {
          this.$message.fail(res.data.msg);
        }
        this.$message.success(res.data.msg);
        // 把id和token保存到本地存储
        localStorage.setItem('id',res.data.id)
        localStorage.setItem('token',res.data.objtoken)
        this.$router.push('/user')
      }else{
        this.$message.fail("格式有误，请重新输入")
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login-text {
  margin: 4.167vw 0;
  font-size: 4.444vw;
}
.btn2{
  margin-top: 2.778vw;
}
</style>
